<script setup lang="ts">
import useBase from '../composables/user/useBase';

const { headTitle, headLogo, msg, isShowEmo, imgFileInput, emos, messageList, handleSend, showEmo, handleEmo, emotion, handleImgFileChange, clickUploadImg, isCanSend, repeatConnectSocket, isShowImg, showImgSrc, handleShowImg, closeChat, handleReply, clickContent } = useBase()

</script>

<template>
    <div class="layout">
        <div class="header">
            <div class="logo">
                <img :src="headLogo" />
                <span class="title">{{ headTitle }}</span>
            </div>
            <div class="close" @click="closeChat">
                <img src="../assets/close.png" />
            </div>
        </div>
        <div class="main-body" id="messageList">
            <div :class="['direct-chat-msg', msg.msg_type]" v-for="msg in messageList">
                <div class="avatar">
                    <img class="direct-chat-img" :src="msg.avatar" v-if="msg.msg_type == 'left'" />
                </div>
                <div class="msg">
                    <div class="direct-chat-info">
                        <span class="direct-chat-name" v-if="msg.msg_type == 'left'">{{ msg.nickname }}</span>
                        <span class="direct-chat-timestamp">{{ msg.send_time_text }}</span>
                    </div>
                    <div class="direct-chat-text" v-if="msg.type == 1"
                        v-html="msg.content.replace(/\:[a-z0-9-]+\:/gi, emotion)"></div>
                    <div class="direct-chat-text" @click="handleShowImg(msg.content)" v-else-if="msg.type == 2">
                        <img :src="msg.content" class="img" />
                    </div>
                    <div class="direct-chat-text" v-else-if="msg.type == 5 && msg.children != null">
                        <div class="reply-title">{{ msg.content }}</div>
                        <div class="reply-content" v-for="reply in msg.children" @click="handleReply(reply.content)">
                            {{ reply.content }}</div>
                    </div>
                    <div class="direct-chat-text" v-else v-html="msg.content">

                    </div>
                </div>
            </div>
        </div>
        <div class="preview-img" v-if="isShowImg">
            <div class="img-container">
                <!-- 显示的大图 -->
                <img class="img" :src="showImgSrc">
                <!-- 关闭按钮 -->
                <a class="close" href="javascript:void(0);" @click="isShowImg = false"></a>
            </div>
        </div>
        <div class="emos" v-if="isShowEmo">
            <img :src="'/src/assets/emo/streamlinehq-' + emo + '-smiley-people-102.png'" v-for="emo in emos"
                @click="handleEmo(emo)" />
        </div>
        <div class="main-bottom" v-if="isCanSend">
            <div class="file-img">
                <svg-icon icon-class="emotion" @click="showEmo"></svg-icon>
                <input ref="imgFileInput" id="img-file" class="file" type="file" accept="image/png,image/jpeg,image/gif"
                    @change.prevent="handleImgFileChange" />
                <svg-icon icon-class="image" @click="clickUploadImg"></svg-icon>
                <!-- <svg-icon icon-class="folder-2"></svg-icon> -->
            </div>
            <div class="content">
                <textarea rows="3" class="text" v-model="msg" @click="clickContent"></textarea>
            </div>
            <div class="btn">
                <button type="button" @click="handleSend">发送</button>
            </div>
        </div>
        <div class="main-bottom" @click="repeatConnectSocket" v-else>
            <div class="img">
                <svg-icon icon-class="message-2"></svg-icon>
            </div>
            <div class="tip">
                继续咨询
            </div>
        </div>
    </div>
</template>